<div>
  <div>
    <button (click)="load()">⭮{{ storeService.currentLanguage.load }}</button>
    <span style="margin-left: 150px">
      <span style="margin-left: 15px">
        {{ storeService.currentLanguage.modelquerytitle }}：
        <input type="text" [(ngModel)]="queryName" />
      </span>
      <span style="margin-left: 15px">
        {{ storeService.currentLanguage.modelqueryauthor }}：
        <input type="text" [(ngModel)]="queryAuthor" />
        
      </span>

      <span style="margin-left: 15px">
        {{ storeService.currentLanguage.modelquerybegin }}：

        <input
          type="date"
          style="display: inline-block; width: 180px"
          [(ngModel)]="earliest"
        />
      </span>
      <span style="margin-left: 15px">
        {{ storeService.currentLanguage.modelquerymaxnumber }}：<select
          [(ngModel)]="storeService.maxModel"
        >
          <option value="30">30</option>

          <option value="50">50</option>
          <option value="100">100</option>
          <option value="200">200</option>
          <option value="300">300</option>
        </select>
      </span>
      <button style="margin-left: 15px" (click)="search()">
        🔍{{ storeService.currentLanguage.modelquery }}
      </button>
    </span>
  </div>
  <dx-popup
    [width]="1290"
    [height]="650"
    [showTitle]="true"
    title="{{ storeService.currentLanguage.select }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="showselect"
  >
    <div>
      <dx-drop-down-box
        [(value)]="selectitemValue"
        placeholder="Select a value..."
        [showClearButton]="true"
        [dataSource]="dic"
      >
        <div *dxTemplate="let data of 'content'">
          <dx-data-grid
            [dataSource]="dic"
            [selection]="{ mode: 'multiple' }"
            [columns]="currentShowColumn"
            [hoverStateEnabled]="true"
            [paging]="{ enabled: true, pageSize: 20 }"
            [filterRow]="{ visible: true }"
            [scrolling]="{ mode: 'infinite' }"
            [height]="355"
            [(selectedRowKeys)]="selectitemValue"
          >
          </dx-data-grid>
        </div>
      </dx-drop-down-box>
      <div style="text-align: center; margin-top: 500px">
        <button (click)="selectValues()">
          {{ storeService.currentLanguage.ok }}
        </button>
        <button (click)="showselect = false">
          {{ storeService.currentLanguage.cancel }}
        </button>
      </div>
    </div>
  </dx-popup>
  <dx-popup
    [width]="800"
    [height]="350"
    [showTitle]="true"
    title="{{ storeService.currentLanguage.confirm }}"
    [dragEnabled]="false"
    [closeOnOutsideClick]="true"
    [(visible)]="confirmDelete"
  >
    <div>
      <div>{{ storeService.currentLanguage.delete }}?</div>
      <div style="text-align: center; margin-top: 200px">
        <button (click)="deletePackage()">
          {{ storeService.currentLanguage.ok }}
        </button>
        <button (click)="confirmDelete = false">
          {{ storeService.currentLanguage.cancel }}
        </button>
      </div>
    </div>
  </dx-popup>
  <div
    style="margin: 5px; border: 1px solid black"
    *ngFor="let item of storeService.modelList"
  >
    <div>
      <span *ngIf="item.type !== 'aggregation'"
        >{{ storeService.currentLanguage.query }}：</span
      >
      <span *ngIf="item.type === 'aggregation'"
        >{{ storeService.currentLanguage.aggregation }}：</span
      >
      {{ item.name }}({{ item.owner }})，创建时间：{{
        item.createTime
      }}，版本:{{ item.version }}
      <div style="margin-right: 3px">
        <button (click)="execute(item)">
          <div *ngIf="!item.running">
            ▶{{ storeService.currentLanguage.execute }}
          </div>
          <div *ngIf="item.running">
            ⌛{{ storeService.currentLanguage.executing }}...
          </div>
        </button>

        <button (click)="open(item)">
          🖉{{ storeService.currentLanguage.edit }}
        </button>
        <button (click)="delete(item)">
          🗑{{ storeService.currentLanguage.delete }}
        </button>
        <button *ngIf="item.result !== undefined" (click)="showResult(item)">
          𝅏
        </button>
        <button *ngIf="item.result !== undefined" (click)="hideResult(item)">
          𝅉
        </button>
      </div>
    </div>
    <div>{{ item.description }}</div>
    <div>
      <div *ngFor="let condition of item.publicCondition">
        <div class="flex flex-1" style="width: 85%">
          {{ condition.Show }}

          <input
            style="display: flex"
            *ngIf="condition.DataType === '' || condition.DataType === 'str'"
            type="text"
            [(ngModel)]="condition.Value"
          />
          <input
            style="display: flex"
            *ngIf="
              (condition.DataType === '' || condition.DataType === 'str') &&
              condition.Operation === 'between'
            "
            type=" text"
            [(ngModel)]="condition.AddtionalValue"
          />

          <input
            type="number"
            style="display: flex"
            *ngIf="condition.DataType === 'num'"
            [(ngModel)]="condition.Value"
          />
          <input
            type="number"
            style="display: flex"
            *ngIf="
              condition.DataType === 'num' && condition.Operation === 'between'
            "
            [(ngModel)]="condition.AddtionalValue"
          />

          <input
            type="date"
            *ngIf="condition.DataType === 'date'"
            [(ngModel)]="condition.Value"
          />

          <input
            type="date"
            *ngIf="
              condition.DataType === 'date' && condition.Operation === 'between'
            "
            [(ngModel)]="condition.AddtionalValue"
          />

          <button
            class="white-space--nowrap"
            *ngIf="condition.DicTable != '' || condition.Options.length > 0"
            (click)="openselect(condition)"
          >
            {{ storeService.currentLanguage.select }}
          </button>
        </div>
      </div>
    </div>

    <div *ngIf="item.showResult && item.result !== undefined">
      <div *ngIf="dataService.isAggregation(item)">
        <div *ngFor="let ret of item.result['statisticResult']">
          {{ ret }}
        </div>
        <dx-data-grid
          *ngIf="item.result['combined'] !== undefined"
          [dataSource]="item.result['combined']"
          [showBorders]="true"
          [allowColumnResizing]="true"
          [columnAutoWidth]="true"
        >
          <dxo-export
            [enabled]="true"
            fileName="item.name"
            [allowExportSelectedData]="true"
          ></dxo-export>
          <dxo-selection mode="multiple"></dxo-selection>
          <dxo-scrolling columnRenderingMode="virtual"></dxo-scrolling>
        </dx-data-grid>
      </div>
      <div *ngIf="dataService.isQuery(item)">
        <dx-data-grid
          [dataSource]="item.result.results"
          [showBorders]="true"
          [allowColumnResizing]="true"
          [columnAutoWidth]="true"
        >
          <dxi-column
            *ngFor="let c of item.result.columns"
            [dataField]="c"
            [caption]="c"
          ></dxi-column>
          <!-- [columnMinWidth]="50" [columnResizingMode]="columnResizingMode" -->
          <dxo-export
            [enabled]="true"
            fileName="results"
            [allowExportSelectedData]="true"
          ></dxo-export>
          <dxo-selection mode="multiple"></dxo-selection>
          <dxo-scrolling columnRenderingMode="virtual"></dxo-scrolling>
        </dx-data-grid>
      </div>
    </div>
  </div>
</div>
